■マウスクリックで背景色を変更
この段落領域は、マウスボタンを押しているときだけ背景色がピンクになり、マウスボタンを離すと元の薄青に戻ります。
<p style="border-style: solid; border-color:
      ;7f4cf5 background-color: lightcyan;
      width: 250px; height: 150px; padding: 10px"
   onMousedown=this.style.backgroundColor="fbc5f4"
   onMouseup=this.style.backgroundColor="lightcyan">
この段落領域は、マウスボタンをクリックしたままの状態の時だけ背景色がピンクになり、マウスボタンを離すと元の背景色に戻ります。




■ マウスオーバーとマウスクリックで画像を変更
<img src="pic01.jpg" alt="画像入れ替え"
    onMouseover=this.src="pic02.jpg"
    onMouseout=this.src="pic01.jpg"
    onclick=this.src="pic03.jpg">


左の画像の上にマウスを乗せると画像が変わり、クリックするとさらに違う画像になります。



 


© Rakuten Group, Inc.